<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
	<!-- 视口标签，禁止用户在移动端随意拉动 -->
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>交易</title>
	<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="../lib/button/buttons.css">

	<link rel="stylesheet" href="../css/common.css">
	<link rel="stylesheet" href="../css/detail.css">
	
	<style type="text/css">
	/*卖家姓名首字母的圆圈*/
	.surname {
		border-radius: 50%;
		background-color: #61b88e;
		width: 36px;
		height: 36px;
		text-align: center;
		display: inline-block;


	}
	/*圆圈里面的文字*/
	.surname .surname-text {
		display: inline-block;
		line-height: 36px;
		color: #fff; 
		font-size: 16px;

	}
	.trade-user {
		text-align: center;
	}

	

	.trade-username .user-name {
		display:inline-block;

	}

	.trade-right .trade-detail p,
	.deal_price .pricebox p
	{
		font-size: 16px;
		font-weight: 700;


	}

	.trade-detail span {
		display: inline-block;
		
	}
	.trade-detail span:nth-child(1) {
		width: 50%;
	}

	.trade-right .deal_price {
		border: 1px solid #ddd;
		border-radius: 4px 4px 0 0;
		padding: 20px 0 20px 4px;

	}

	.deal_price .pricebox {
		margin-top: 20px;
		text-align: center;
	}

	.trade-right .trade-know {
		margin-top: 20px;
	} 




</style>

    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
	<header></header>
	<section>
		<div class="container">
			<div class="col-md-4 trade-left">
				<div class="panel panel-default trade-user">
					<!-- Default panel contents -->
					<div class="panel-heading">交易用户</div>
					<div class="panel-body trade-username">
						<div class="surname">
							<span class="surname-text">佛</span>
						</div>
						<div class="user-name">
							<span>佛山黄飞鸿</span>
							<!-- <p class="text-muted">UID：<span>36502453</span></p> -->
						</div>
					</div>

					<!-- List group -->
					<ul class="list-group">
						<li class="list-group-item">
							<span class="glyphicon glyphicon-user" aria-hidden="true"></span> 
							<span>身份已认证</span>
						</li>
						<li class="list-group-item text-muted">
							总成单<strong class="text-success">42</strong>次
						</li>
						<li class="list-group-item text-muted">
							完成率<strong class="text-success">99%</strong>
						</li>
						<li class="list-group-item">
							<a href="#">查看商家其他信息</a>
						</li>
						
					</ul>
				</div>
			</div>

			<div class="col-md-8 trade-right">
				<!-- 挂单信息 -->
				<div class="well well-lg trade-detail">
					<p><span>价格</span><span class="text-danger">0.00024 CNY/JF</span></p>
					<p><span>担保数量</span><span class="text-danger">10000000</span></p>
					<p><span>付款方式</span><span>支付宝</span></p>
					<p><span>付款期限</span><span>60分钟</span></p>
				</div>

				<!--担保信息-->
				<div class="deal_price">


					<div class="input-group deal_price_box col-md-6 col-md-offset-3">
						<span class="input-group-addon">JF</span>
						<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="输入担保的个数 必须为正整数">
						<span class="input-group-addon">.00</span>
					</div> 

					<div class="pricebox">

						<p class="text-center">担保金额：<strong class="text-primary">0</strong>CNY</p>
						<p class="text-center">手续费：<strong class="text-primary">0</strong>个JF</p>

						<button class="button button-3d button-action button-pill">确认买入</button>




						
					</div>
				</div>
				<!-- 担保须知 -->
				<div class="panel panel-default trade-know">
					<div class="panel-heading">担保须知</div>
					<div class="panel-body">
						<p class="text-muted">在您发起担保请求后，数字货币被锁定在托管中，受到平台保护。 如果您是卖家，发起担保请求后，您可通过充值并等待买家付款。买家在付款时限内进行付款。您在收到付款后应放行处于托管中的数字货币。</p>
						<p class="text-muted">担保前请阅读《平台网络服务条款》以及常见问题、担保指南等帮助文档。</p>
						<p class="text-muted">请注意，四舍五入和价格的波动可能会影响最终成交的数字货币数额。您输入的固定数额决定最后数额，数字货币金额将在请求发布的同一时间由即时的价格算出。</p>
						<p class="text-muted">托管服务保护网上担保的买卖双方。在发生争议的情况下，我们将评估所提供的所有信息，并将托管的数字货币放行给其合法所有者。</p>
					</div>
				</div>
			</div>


		</div>
		
	</section>


	<!-- 底部内容 -->
	<footer>

	</footer>
	<!-- 底部内容end -->
	<script src="../lib/jquery/jquery-2.1.1.js"></script>
	<script src="../lib/bootstrap/js/bootstrap.min.js"></script>

	<script type="text/javascript">
		$(function () {

			$('header').load('../common/nav.html');
			$('footer').load('../common/footer.html');




		})
	</script>
</body>
</html>